<template>
  <table class="his-bottom-table-table">
    <thead class="his-bottom-table-thead">
      <tr class="bottom-table-thead-tr">
        <th>{{theadDataVar.time}}</th>
        <th>{{theadDataVar.periods}}</th>
        <th class="thead-tr-choose-th">
          <span class="choose-th-content active">
           {{theadDataVar.number}}
          </span>
        </th>
        <th class="thead-tr-zonghe-th">{{theadDataVar.total}}</th>
      </tr>
    </thead>
    <tbody class="his-bottom-table-tbody">
      <tr class="bottom-table-tbody-tr" v-for="item in tbodyDataVar">
        <td class="table-tbody-tr-col-one">{{item.time}}</td>
        <td class="table-tbody-tr-col-two">{{item.periods}}</td>
        <td class="table-tbody-tr-col-three table-tbody-tr-col-threepc" v-show="showtablepc">
          <span class="choose-tbody-td-content choose-tbody-td-contentpc" v-for="contentItem in item.number">{{contentItem}}</span>
        </td>
        <td class="table-tbody-tr-col-three table-tbody-tr-col-threepc" v-show="showtablek3">
          <span class="choose-tbody-td-content" v-for="contentItem in item.number">{{contentItem}}</span>
        </td>
        <td class="table-tbody-tr-col-four">
          <span class="zonghe-tbody-td-content" v-for="item in item.total">{{item}}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    hisBottomTableTotalData: null
  },
  data() {
    return {
      theadDataVar: {},
      tbodyDataVar: [],
      showtablepc:true,
      showtablek3:false
    };
  },
  watch: {
    hisBottomTableTotalData() {
      this.theadDataVar = this.hisBottomTableTotalData.table_head;
      this.tbodyDataVar = this.hisBottomTableTotalData.content;
      if(this.$store.state.lotteryType != 'l3d' && this.$store.state.lotteryType != 'k3'){
        this.showtablek3 = false;
        this.showtablepc = true;
      }else if(this.$store.state.lotteryType == 'l3d' || this.$store.state.lotteryType == 'k3'){
        this.showtablek3 = true;
        this.showtablepc = false;
      }
    }
  }
};
</script>

<style lang="less">
@import url(../../assets/css/hispagebottomtable.less);
@import url(../../assets/css/hispagebottomtablepc.less);
</style>


